<template>
	<view class="template-ucharts tn-safe-area-inset-bottom">

		<view class="" :style="{paddingTop: vuex_custom_bar_height  +  'rpx'}">
			<swiper class="card-swiper" @click="tn('')" :circular="true" :autoplay="true" duration="500" interval="8000"
				@change="cardSwiper">
				<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
					<view class="swiper-item image-banner"
						:style="'background-image:url('+ item.url + ');background-size: cover;border-radius: 15rpx;'">
					</view>
					<view class="swiper-item-text">
						<view class="tn-text-bold tn-color-white" style="font-size: 50rpx;">{{item.title}}</view>
						<view class="tn-color-white tn-padding-top" style="font-size: 30rpx;">{{item.name}}</view>
						<view class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-sm tn-padding-bottom-sm">
							{{item.text}}
						</view>
					</view>
				</swiper-item>
			</swiper>
			<tn-notice-bar :list="noticeList" mode="vertical" :duration="5000"></tn-notice-bar>
			<view class="item-box">
				<view class="item-content blue">
					<img src="/static/order.png" alt="" class="item-img" />
					<view class="item-title">
						接单信息
					</view>
				</view>
				<view class="item-content red">
					<img src="/static/notic.png" alt="" class="item-img" />
					<view class="item-title">
						预警信息
					</view>
				</view>
			</view>

			<view class="tn-padding-top-xl tn-padding-bottom-xl chart-box article-shadow">
				<view class="tn-flex tn-flex-row-between tn-flex-col-center">
					<view class="justify-content-item tn-margin tn-text-bold tn-text-lg">
						任务状态-本年
					</view>
					<view @click="selectType"
						class="justify-content-item tn-margin-right tn-padding-xs tn-text-sm tn-bg-gray--light tn-radius tn-color-gray--dark">
						<text class="tn-padding-left-xs tn-padding-right-xs">{{type}}</text>
						<text class="tn-icon-down tn-padding-right-xs"></text>
					</view>
				</view>
				<view class="" style="min-height: 500rpx;">
					<qiun-data-charts canvas2d type="ring" :opts="makeupOpts" :chartData="makeupChartData" />
				</view>
			</view>


			<tn-select v-model="show" mode="single" :list="typeList" @confirm="confirm"></tn-select>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				noticeList: [
					'用户张XX已下单，点击查看详情',
					'有32条预警消息未处理',
					'最新放假通知已出',
				],
				swiperList: [{
					id: 0,
					type: 'image',
					title: '',
					name: '',
					url: '/static/banner1.png',
				}],
				cardCur: 0,
				list: [{
					name: '本年'
				}, {
					name: '本月'
				}, {
					name: '当天',
					count: 5
				}],
				current: 0,
				show: false,
				type: '全部',
				typeList: [{
						value: '0',
						label: '全部'
					}, {
						value: '1',
						label: '消防安全'
					},
					{
						value: '2',
						label: '食堂安全'
					},
					{
						value: '3',
						label: '护工查房'
					}
				],

				// 营收占比
				makeupChartData: {},
				makeupOpts: {
					rotate: false,
					rotateLock: false,
					color: ["#4B98FE", "#00D05E", "#FFAC00", "#FB6A67", "#957BFE", "#00B9FE", "#FE871B", "#00C8B0",
						"#F674D6"
					],
					padding: [15, 10, 15, 10],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 28
					},
					title: {
						name: "合计",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "123",
						fontSize: 25,
						color: "#4B98FE"
					},
					extra: {
						ring: {
							ringWidth: 20,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 10,
							border: true,
							borderWidth: 2,
							borderColor: "#FFFFFF",
							// linearType: "custom"
						}
					}
				},
			};
		},
		onShow() {},
		onLoad() {},
		onReady() {},
		mounted() {},
		created() {
			this.drawMakeupCharts(); //营收占比
		},
		methods: {
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},

			// 营收占比 绘制
			drawMakeupCharts() {
				let res = {
					series: [{
						data: [{
							"name": "已施工任务",
							"value": 61,
							"labelText": "已施工：61"
						}, {
							"name": "待施工任务",
							"value": 10,
							"labelText": "待施工：10"
						}, {
							"name": "已评估",
							"value": 20,
							"labelText": "已评估：20"
						}, {
							"name": "未评估",
							"value": 12,
							"labelText": "未评估：12"
						}]
					}]
				};
				this.makeupChartData = JSON.parse(JSON.stringify(res));
			},
			change(index) {
				this.current = index;
			},
			selectType() {
				this.show = true
			},
			confirm(e) {
				console.log(e);
				this.type = e[0].label
				this.typeId = e[0].value
			}
		},
	};
</script>
<style lang="scss" scoped>
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}


	/* 间隔线 start*/
	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid #F8F7F8;
	}

	/* 间隔线小 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F7F8;
	}

	.chart-box {
		box-sizing: border-box;
		margin: 30rpx;
		border-radius: 30rpx;
	}

	.article-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 轮播视觉差 start */
	.card-swiper {
		height: 330rpx !important;
	}

	.card-swiper swiper-item {
		width: 750rpx !important;
		left: 0rpx;
		box-sizing: border-box;
		padding: 40rpx 30rpx 30rpx 30rpx;
		overflow: initial;
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100%;
		border-radius: 15rpx;
		transform: scale(1);
		transition: all 0.2s ease-in 0s;
		// overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}

	.card-swiper swiper-item .swiper-item-text {
		margin-top: -160rpx;
		text-align: center;
		width: 100%;
		display: block;
		height: 50%;
		border-radius: 10rpx;
		transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item-text {
		margin-top: -220rpx;
		width: 100%;
		transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
	}

	.item-box {
		display: flex;
		justify-content: center;

		.item-content {
			width: 45%;
			margin: 0 10rpx;
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 12rpx;
		}

		.blue {
			background-color: #70c9f8;
		}

		.red {
			background-color: #ee7ef8;
		}

		.item-img {
			width: 100rpx;
			height: 100rpx;
			margin-right: 10rpx;
		}
		.item-title {
			color: #fff;
			font-size: 40rpx;
		}
	}
</style>